<template>
	<view>
		<u-navbar bgColor="#F5F9FC" :placeholder="true">
			<view slot="left" class="navigate-title">
				<navigator open-type="navigateBack" :delta="1" class="back-button">

				</navigator>
				<view style="display: flex;">
					<u-icon color="#1e88e5" name="arrow-left"></u-icon>
					<text class="header-title">发票录入管理</text>
				</view>
			</view>
			<view slot="right">
				<view class="filter-button" @click="toggleFilterPanel">
					<text class="fa fa-filter filter-icon"></text>
				</view>
				<view class="search-button" @click="toggleSearchBar"></view>
			</view>
		</u-navbar>
		<view class="invoice-management-page">

			<!-- 更多收票方式 -->
			<view class="section">
				<text class="section-title">更多收票方式</text>
				<view class="ticket-methods">
					<!-- 循环渲染方法项 -->
					<view class="method-item" v-for="(item, index) in methodList" :key="index"
						@click="handleMethodClick(item.action)">
						<image class="method-icon" :src="item.iconSrc"></image>
						<text class="method-text">{{ item.text }}</text>
					</view>
				</view>
			</view>
			<view>
				<suse-tabbar :indexValue='1'></suse-tabbar>
			</view>
			<!-- 发票预览弹窗 -->
			<u-modal :show="showPreviewDialog" title="发票预览" @confirm="previewConfirmed" @cancel="cancelPreview"
				:showCancelButton="true" confirmText="开始识别" cancelText="取消">
				<view class="preview-container">
					<!-- 文件类型提示 -->
					<view class="file-type-tag" v-if="currentFileType">
						<u-tag :text="currentFileType.toUpperCase()" type="primary" size="mini" />
					</view>

					<!-- 发票预览图 -->
					<image class="preview-image" :src="previewImage" mode="aspectFit" v-if="currentFileType !== 'pdf'">
					</image>

					<!-- PDF文件特殊显示 -->
					<view class="pdf-preview" v-else>
						<image src="/static/invoice-icons/pdf-icon.png" class="pdf-icon"></image>
						<text class="pdf-text">{{ previewInvoiceFileName }}</text>
					</view>

					<!-- 发票基本信息 -->
					<view class="invoice-info" v-if="previewInvoiceData">
						<view class="info-row">
							<text class="info-label">销售方:</text>
							<text class="info-value">{{ previewInvoiceData.sellerName || '未识别' }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">金额:</text>
							<text class="info-value">
								{{ previewInvoiceData.amount ? '¥' + previewInvoiceData.amount : '未识别' }}
							</text>
						</view>
						<view class="info-row">
							<text class="info-label">日期:</text>
							<text class="info-value">{{ previewInvoiceData.date || '未识别' }}</text>
						</view>
					</view>

					<text class="preview-tip">确认发票信息无误后点击"开始识别"</text>
				</view>
			</u-modal>
			<u-modal :show="showSmsModal" title="短信获取发票" @confirm="confirmSmsModal" @cancel="closeSmsModal"
				:showCancelButton="true" confirmText="获取发票" cancelText="取消">
				<view class="sms-modal-content">
					<!-- 步骤指示器 -->
					<view class="steps-container">
						<view class="step-item" :class="{'active': currentStep >= 1}">
							<view class="step-number">1</view>
							<text class="step-label">复制短信内容</text>
						</view>
						<view class="step-item" :class="{'active': currentStep >= 2}">
							<view class="step-number">2</view>
							<text class="step-label">粘贴短信</text>
						</view>
						<view class="step-item" :class="{'active': currentStep >= 3}">
							<view class="step-number">3</view>
							<text class="step-label">点击获取发票</text>
						</view>
					</view>

					<!-- 短信内容输入框 -->
					<view class="sms-input-container">
						<u-input v-model="smsContent" type="textarea" height="200" placeholder="请粘贴包含发票链接的短信内容"
							:maxlength="500" border="surround" />

						<view class="input-footer">
							<text class="char-count">{{ smsContent.length }}/500</text>
							<u-icon name="trash" size="20" @click="clearSmsContent"></u-icon>
						</view>
					</view>

					<!-- 检测到的URL -->
					<view v-if="detectedUrl" class="url-preview">
						<text class="url-text">检测到链接：</text>
						<text class="url-link">{{ detectedUrl }}</text>
					</view>
				</view>
			</u-modal>
			<!-- 解析结果确认弹窗 -->
			<u-modal :show="showResultConfirmDialog" title="解析结果确认" @confirm="confirmResult" @cancel="cancelResult"
				:showCancelButton="true" confirmText="确认" cancelText="取消">
				<!-- 添加一个新的容器来设置固定高度和滚动条 -->
				<view class="result-form-container">
					<view class="result-form">
						<u-form labelPosition="left" :model="parsedResult" ref="resultForm" style="padding: 30rpx;">
							<u-form-item labelWidth="150rpx" label="发票类型" prop="发票类型">
								<u-input v-model="parsedResult['发票类型']" border="bottom" placeholder="请输入发票类型"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="发票代码" prop="发票代码">
								<u-input v-model="parsedResult['发票代码']" border="bottom" placeholder="请输入发票代码"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="发票号码" prop="发票号码">
								<u-input v-model="parsedResult['发票号码']" border="bottom" placeholder="请输入发票号码"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="开票日期" prop="开票日期">
								<u-input v-model="parsedResult['开票日期']" border="bottom" placeholder="请输入开票日期"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="购买方名称" prop="购买方.名称">
								<u-input v-model="parsedResult['购买方']['名称']" border="bottom"
									placeholder="请输入购买方名称"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="购买方纳税人识别号" prop="购买方.纳税人识别号">
								<u-input v-model="parsedResult['购买方']['纳税人识别号']" border="bottom"
									placeholder="请输入购买方纳税人识别号"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="销售方名称" prop="销售方.名称">
								<u-input v-model="parsedResult['销售方']['名称']" border="bottom"
									placeholder="请输入销售方名称"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="销售方纳税人识别号" prop="销售方.纳税人识别号">
								<u-input v-model="parsedResult['销售方']['纳税人识别号']" border="bottom"
									placeholder="请输入销售方纳税人识别号"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="金额" prop="金额">
								<u-input v-model="parsedResult['金额']" border="bottom" placeholder="请输入金额"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="税额" prop="税额">
								<u-input v-model="parsedResult['税额']" border="bottom" placeholder="请输入税额"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="价税合计" prop="价税合计">
								<u-input v-model="parsedResult['价税合计']" border="bottom" placeholder="请输入价税合计"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="税率" prop="税率">
								<u-input v-model="parsedResult['税率']" border="bottom" placeholder="请输入税率"></u-input>
							</u-form-item>
							<u-form-item labelWidth="150rpx" label="备注" prop="备注">
								<u-input v-model="parsedResult['备注']" border="bottom" placeholder="请输入备注"></u-input>
							</u-form-item>
						</u-form>
					</view>
				</view>
			</u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				methodList: [{
						iconSrc: '/static/icon' + "/camera.png",
						text: "拍照识票",
						action: "TakePhoto" // 使用动作标识代替直接绑定方法
					},
					{
						iconSrc: '/static/icon' + "/file.png",
						text: "微信聊天文件",
						action: "WechatFile"
					},
					{
						iconSrc: '/static/icon' + "/wallet.png",
						text: "微信卡包",
						action: "WechatWallet"
					},
					{
						iconSrc: '/static/icon' + "/scan.png",
						text: "扫码录票",
						action: "ScanCode"
					},
					{
						iconSrc: '/static/icon' + "/edit.png",
						text: "手工录票",
						action: "ManualEntry"
					}
				],
				// 新增：发票历史记录数组
				invoiceHistory: [],
				// 新增：当前选中的发票索引
				currentInvoiceIndex: -1,
				// 其他已有数据保持不变...
				previewImage: null, // 预览图片路径

				previewInvoiceData: null, // 预览发票数据
				showPreviewDialog: false, // 控制预览弹窗显示
				isProcessing: false, // 防止重复提交
				currentFileType: null, // 新增：记录当前文件类型（图片/PDF）
				currentAction: null, // 新增：记录当前操作类型
				previewInvoiceFileName: '电子发票', // 默认文件名
				showSmsModal: false, // 控制短信弹窗显示
				smsContent: '', // 短信内容
				detectedUrl: '', // 检测到的URL
				currentStep: 1, // 当前步骤
				hyToken: 'iZbeWOjLjE7De+4B5F3Kp4P4PXi0p2h1Q61b3GKrcznxbfwGJXNHKnkBE1TL/eLkjNMnyV5boDHjDu+yR3MT7Q==', // 确保 token 正确填写
				countdown: 60, // 倒计时时间，单位：秒
				timer: null, // 定时器
				showResultConfirmDialog: false, // 控制解析结果确认弹窗显示
				parsedResult: {} // 解析结果数据
			};
		},
		watch: {
			smsContent(newVal) {
				this.extractUrl(newVal);
			}
		},
		created() {
			// 页面加载时读取历史记录
			this.loadInvoiceHistory();
		},
		methods: {
			// 取消预览
			cancelPreview() {
				this.showPreviewDialog = false;
				this.previewImage = null;
				this.previewInvoiceData = null;
				this.isProcessing = false;
				uni.showToast({
					title: '已取消识别',
					icon: 'none'
				});
			},
			// 统一处理方法点击事件
			handleMethodClick(action) {
				if (this[action]) {
					this[action]();
				} else {
					console.error(`未找到方法: ${action}`);
					uni.showToast({
						title: '功能暂不可用',
						icon: 'none'
					});
				}
			},

			// 短信收票点击处理
			Sms() {
				// 这里需要调用短信相关的原生插件或接口，UniApp 原生 API 暂不支持直接读取短信
				// 以下为模拟示例
				this.showSmsModal = true;
				this.smsContent = '';
				this.detectedUrl = '';
				this.currentStep = 1;
			},

			// 处理发票数据
			handleInvoiceData(invoiceData) {
				console.log('识别到的发票数据', invoiceData);
				uni.showToast({
					title: '识别成功',
					icon: 'success'
				});
				// 显示解析结果确认弹窗
				this.parsedResult = invoiceData.structured_result;
				this.showResultConfirmDialog = true;
			},
			// 解析扫描结果
			parseScanResult(result) {
				// 这里根据扫描结果的格式进行解析，假设结果是 JSON 格式
				try {
					const invoiceData = JSON.parse(result);
					this.handleInvoiceData(invoiceData);
				} catch (e) {
					console.error('解析扫描结果失败', e);
					uni.showToast({
						title: '解析扫描结果失败',
						icon: 'none'
					});
				}
			},

			// 手工录票点击处理
			ManualEntry() {
				console.log("---");
				uni.navigateTo({
					url: '/pages/manualEntry/manualEntry'
				});
			},
			// 统一显示预览弹窗
			showPreview(filePath, invoiceData = null, actionType, fileType = 'image') {
				this.previewImage = filePath;
				this.previewInvoiceData = invoiceData;
				this.currentAction = actionType;
				this.currentFileType = fileType;

				// 安全设置文件名
				this.previewInvoiceFileName = (invoiceData && invoiceData.fileName) ?
					invoiceData.fileName :
					'电子发票';

				this.showPreviewDialog = true;
			},

			// 用户确认预览后执行识别
			async previewConfirmed() {
				try {
					this.showPreviewDialog = false;
					this.countdown = 60; // 重置倒计时
					this.timer = setInterval(() => {
						if (this.countdown > 0) {
							this.countdown--;
							uni.showLoading({
								title: `识别时间: ${this.countdown} 秒`,
								mask: true
							});
						} else {
							clearInterval(this.timer);
						}
					}, 1000);

					// 使用 uni.uploadFile 上传文件
					await new Promise((resolve, reject) => {
						uni.uploadFile({
							url: 'http://175.178.185.38:8047/api/parse-invoice',
							filePath: this.previewImage,
							name: 'file',
							formData: {
								content: '这个文件内容是什么,按照标题内容一一对应,请"####"开始，标题和内容用":"号隔开，每一段标题内容用","分开'
							},
							timeout: 120000, // 设置超时时间为2分钟（120秒）
							header: {
								Authorization: `Bearer ${this.hyToken}`,
							},
							success: (uploadRes) => {
								try {
									console.log(uploadRes.data);
									const resData = JSON.parse(uploadRes.data);

									if (resData.success) {
										uni.hideLoading(); // 关闭加载状态
										clearInterval(this.timer); // 清除定时器
										uni.showModal({
											title: '解析成功',
											content: JSON.stringify(resData.result, null,
												2),
											showCancel: false
										});
										this.handleInvoiceData(resData);
										resolve();
									} else {
										uni.showToast({
											title: resData.error || '解析失败',
											icon: 'none'
										});
										reject(new Error(resData.error || '解析失败'));
									}
								} catch (e) {
									uni.showToast({
										title: '响应解析失败',
										icon: 'error'
									});
									reject(e);
								}
							},
							fail: (err) => {
								uni.showToast({
									title: `上传失败: ${err.errMsg}`,
									icon: 'none'
								});
								reject(err);
							},
							complete: () => {
								uni.hideLoading(); // 关闭加载状态
								clearInterval(this.timer); // 清除定时器
							}
						});
					});
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: `请求异常：${e.message}`,
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
					this.isProcessing = false;
					this.previewImage = null;
					this.previewInvoiceData = null;
				}
			},
			// 拍照识票（添加预览）
			TakePhoto() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'],
					success: (res) => {
						const tempFilePath = res.tempFilePaths[0];
						this.showPreview(tempFilePath, null, 'TakePhoto');
					},
					fail: (err) => {
						// 错误处理
					}
				});
			},

			// 微信聊天文件（添加预览）
			WechatFile() {
				uni.chooseMessageFile({
					count: 1,
					type: 'file',
					extension: ['pdf', 'jpg', 'jpeg', 'png'],
					success: (res) => {
						const file = res.tempFiles[0];
						const isPDF = file.name.toLowerCase().endsWith('.pdf');

						// 显示预览
						this.showPreview(
							file.path, {
								fileName: file.name
							},
							'WechatFile',
							isPDF ? 'pdf' : 'image'
						);
					},
					fail: (err) => {
						// 错误处理
					}
				});
			},

			// 微信卡包（优化预览显示）
			async WechatWallet() {
				if (this.isProcessing) return;
				this.isProcessing = true;

				try {
					const res = await new Promise((resolve, reject) => {
						uni.chooseInvoice({
							success: resolve,
							fail: reject
						});
					});

					const invoices = res.invoices;
					if (!invoices || invoices.length === 0) {
						this.isProcessing = false;
						return;
					}

					for (const invoice of invoices) {
						const downloadRes = await new Promise((resolve) => {
							uni.downloadFile({
								url: invoice.url,
								success: resolve,
								fail: () => resolve(null)
							});
						});

						if (!downloadRes || downloadRes.statusCode !== 200) continue;

						// 显示预览（含发票基础信息）
						this.showPreview(
							downloadRes.tempFilePath, {
								sellerName: invoice.sellerName,
								amount: invoice.totalAmount,
								date: invoice.time
							},
							'WechatWallet',
							invoice.url.toLowerCase().endsWith('.pdf') ? 'pdf' : 'image'
						);
						break; // 一次只处理一张
					}
				} catch (err) {
					// 错误处理
				} finally {
					this.isProcessing = false;
				}
			},

			// 扫码录票（添加预览）
			ScanCode() {
				uni.scanCode({
					onlyFromCamera: true,
					success: (res) => {
						try {
							const result = JSON.parse(res.result);
							// 显示预览（使用默认发票图标）
							this.showPreview(
								'/static/invoice-icons/default-invoice.png', {
									sellerName: result.sellerName,
									amount: result.amount,
									date: result.invoiceDate
								},
								'ScanCode'
							);
						} catch (e) {
							// 直接处理非JSON格式扫码结果
							this.parseScanResult(res.result);
						}
					},
					fail: (err) => {
						// 错误处理
					}
				});
			},

			// 关闭短信弹窗
			closeSmsModal() {
				this.showSmsModal = false;
			},

			// 确认获取发票
			async confirmSmsModal() {
				if (!this.detectedUrl) {
					uni.showToast({
						title: '未检测到有效链接',
						icon: 'none'
					});
					return;
				}

				try {
					this.currentStep = 3; // 更新步骤状态
					await this.downloadAndProcessFile(this.detectedUrl);
				} catch (error) {
					uni.showToast({
						title: '获取发票失败',
						icon: 'none'
					});
				} finally {
					this.showSmsModal = false;
				}
			},

			// 从短信内容中提取URL
			extractUrl(content) {
				const urlRegex = /https?:\/\/[^\s]+/g;
				const urls = content.match(urlRegex);
				this.detectedUrl = urls && urls.length ? urls[0] : '';

				// 更新步骤状态
				if (this.detectedUrl) {
					this.currentStep = 2;
				}
			},

			// 清空短信内容
			clearSmsContent() {
				this.smsContent = '';
				this.detectedUrl = '';
				this.currentStep = 1;
			},

			// 下载并处理发票文件
			async downloadAndProcessFile(url) {
				uni.showLoading({
					title: '下载发票中...',
					mask: true
				});

				try {
					const downloadRes = await uni.downloadFile({
						url,
						timeout: 30000 // 30秒超时
					});

					if (downloadRes.statusCode !== 200) {
						throw new Error('下载失败');
					}

					const tempFilePath = downloadRes.tempFilePath;
					const extension = this.getFileExtension(url);

					// 验证文件类型
					const validExtensions = ['.pdf', '.jpg', '.jpeg', '.png'];
					if (!validExtensions.includes(extension.toLowerCase())) {
						throw new Error('不支持的文件类型');
					}

					// 显示预览
					this.showPreview(
						tempFilePath,
						null,
						'Sms',
						extension === '.pdf' ? 'pdf' : 'image'
					);
				} catch (err) {
					console.error('发票处理失败:', err);
					throw err;
				} finally {
					uni.hideLoading();
				}
			},

			// 获取文件扩展名
			getFileExtension(url) {
				return url.split('?')[0].substring(url.lastIndexOf('.'));
			},
			// 确认解析结果
			confirmResult() {
				try {
					// 获取当前发票数据
					const newInvoice = {
						id: Date.now(), // 使用时间戳作为唯一ID
						result: this.parsedResult,
						timestamp: new Date().toISOString()
					};

					// 添加到历史记录
					this.invoiceHistory.unshift(newInvoice); // 添加到数组开头，最新的在前面

					// 保存到本地存储
					uni.setStorageSync('invoiceHistory', JSON.stringify(this.invoiceHistory));

					uni.showToast({
						title: '保存成功',
						icon: 'success'
					});
					this.showResultConfirmDialog = false;

					// 刷新发票列表
					this.loadInvoiceHistory();
				} catch (e) {
					console.error('保存失败', e);
					uni.showToast({
						title: '保存失败',
						icon: 'none'
					});
				}
			},

			// 加载发票历史记录
			loadInvoiceHistory() {
				try {
					const history = uni.getStorageSync('invoiceHistory');
					if (history) {
						this.invoiceHistory = JSON.parse(history);
					}
				} catch (e) {
					console.error('读取历史记录失败', e);
					this.invoiceHistory = [];
				}
			},

			// 查看历史发票
			viewInvoice(index) {
				this.currentInvoiceIndex = index;
				this.parsedResult = this.invoiceHistory[index].result;
				this.showResultConfirmDialog = true;
			},

			// 删除发票
			deleteInvoice(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这张发票吗？',
					success: (res) => {
						if (res.confirm) {
							this.invoiceHistory.splice(index, 1);
							uni.setStorageSync('invoiceHistory', JSON.stringify(this.invoiceHistory));
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			// 取消解析结果确认
			cancelResult() {
				this.showResultConfirmDialog = false;
			}
		}
	};
</script>
<style scoped>
	/* 短信弹窗样式 */
	.sms-modal-content {
		padding: 20rpx;
	}

	/* 步骤指示器 */
	.steps-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	/* 其他已有样式保持不变... */

	/* 解析结果确认弹窗样式 */
	.result-form {
		padding: 20rpx;
		max-height: 40vh;
		/* 设置最大高度为视口高度的40% */
		overflow-y: auto;
		/* 内容超出时显示垂直滚动条 */
		-webkit-overflow-scrolling: touch;
		/* 优化iOS设备上的滚动体验 */
	}
</style>
<style scoped>
	/* 短信弹窗样式 */
	.sms-modal-content {
		padding: 20rpx;
	}

	/* 步骤指示器 */
	.steps-container {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;
	}

	.step-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
		position: relative;
	}

	.step-item::after {
		content: '';
		position: absolute;
		top: 30rpx;
		left: 50%;
		width: 100%;
		height: 4rpx;
		background: #e0e0e0;
		z-index: 1;
	}

	.step-item:last-child::after {
		display: none;
	}

	.step-item.active .step-number {
		background-color: #ff7900;
		color: #fff;
	}

	.step-item.active::after {
		background-color: #ff7900;
	}

	.step-number {
		width: 60rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 50%;
		background: #f5f5f5;
		margin-bottom: 15rpx;
		position: relative;
		z-index: 2;
		font-weight: bold;
		font-size: 28rpx;
	}

	.step-label {
		font-size: 24rpx;
		color: #666;
		text-align: center;
		padding: 0 10rpx;
	}

	/* 短信输入区域 */
	.sms-input-container {
		position: relative;
		margin-bottom: 20rpx;
	}

	.input-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10rpx 15rpx;
		background: #f9f9f9;
		border-bottom-left-radius: 8rpx;
		border-bottom-right-radius: 8rpx;
	}

	.char-count {
		font-size: 24rpx;
		color: #999;
	}

	/* URL预览区域 */
	.url-preview {
		background: #f5f5f5;
		padding: 15rpx;
		border-radius: 8rpx;
		margin-top: 15rpx;
	}

	.url-text {
		font-size: 26rpx;
		color: #666;
		display: block;
		margin-bottom: 8rpx;
	}

	.url-link {
		color: #2979ff;
		font-size: 24rpx;
		word-break: break-all;
		display: block;
	}

	page {
		background: #f4f4f4 !important;
	}

	.invoice-management-page {
		background: #f4f4f4 !important;
		min-height: 100vh;
		padding: 30rpx;
	}

	.section {
		background-color: #ffffff;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
		display: block;
	}

	.ticket-methods {
		display: flex;
		flex-wrap: wrap;
		/* justify-content: space-between; */
		justify-content: start;
	}

	.method-item {
		width: 30%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.method-icon {
		width: 120rpx;
		height: 110rpx;
		margin-bottom: 10rpx;
		border-radius: 50rpx;
	}

	.method-text {
		font-size: 28rpx;
		text-align: center;
	}

	.tip-section {
		background-color: #ffffff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tip-text {
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}

	.unlock-btn {
		background-color: #007AFF;
		color: #ffffff;
		border-radius: 8rpx;
		padding: 10rpx 20rpx;
		font-size: 24rpx;
	}

	.bind-tip {
		font-size: 24rpx;
		color: #007AFF;
		text-decoration: underline;
	}
</style>
<style scoped>
	/* 新增PDF预览样式 */
	.pdf-preview {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 300rpx;
		border: 1rpx dashed #ddd;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}

	.pdf-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
	}

	.pdf-text {
		font-size: 28rpx;
		color: #333;
	}

	/* 文件类型标签 */
	.file-type-tag {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
	}

	/* 新增预览弹窗样式 */
	.preview-container {
		padding: 20rpx;
		text-align: center;
	}

	.preview-image {
		width: 100%;
		height: 300rpx;
		border: 1rpx solid #eee;
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		background-color: #f9f9f9;
	}

	.invoice-info {
		margin-bottom: 20rpx;
		text-align: left;
	}

	.info-row {
		display: flex;
		margin-bottom: 12rpx;
		font-size: 28rpx;
	}

	.info-label {
		width: 120rpx;
		color: #666;
	}

	.info-value {
		flex: 1;
		font-weight: 500;
		color: #333;
	}

	.preview-tip {
		display: block;
		font-size: 24rpx;
		color: #999;
		margin-top: 15rpx;
	}

	/* 解析结果确认弹窗样式 */
	.result-form {
		padding: 20rpx;
	}
</style>